## what
  - add `Error` component

  ## how
  - takes in two props
    - status: http status code
    - message (optional): message to display under the status code

  ## why
  - this will be displayed in a page if there's an error returned when
    fetching the api server
  - using `nextjs` app router `error.tsx` doesn't help
    - ex: if there's an 404 error, the `error` page rendered, not
      `not-found.tsx`
    - ex: if there's an 400 errror, the `error` page is rendered but the
      error is unhandled

  ## where

  ## usage

…Num]` to it's own file

  ## what
  - move schema validation for endpoint `/api/problems/[problemNum]` to it's own file
  - add schema in `/api/problems/[problemNum]` via import

  ## how

  ## why
  - the schema validation will also be used in the client side
    - used in `/problems[problemNum]`

  ## where
  - ./src/app/api/problems/[problemNum]/route.ts
  - ./src/schema/index.ts

  ## usage

  ## what
  - add react-query hook to fetch stats of problem number

  ## how
  - fetch from api endpoint `/api/problems/[problemNum]`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - return status 404 if problem number is not found

  ## how

  ## why
  - this will ensure a problem number not found will be handled

  ## where
  - ./src/app/api/problems/[problemNum]/route.ts

  ## usage

  ## what
  - add type `number` to uhunt urls

  ## how

  ## why
  - it's a little tedious to convert number to a string when using the
    function

  ## where
  - ./src/utils/constants.ts

  ## usage

  ## what
  - fetch stats for `/problems/[problemNum]` page

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - add component `Card`

  ## how
  - run command
    npx shadcn-ui@latest add card

  ## why

  ## where
  - ./src/components/ui/card.tsx

  ## usage

  ## what
  - add structure and placeholder components

  ## how
  - divide into to big sections
    - charts
      - uses grid for display
      - 2 columns on md to larger screens
      - 1 column on smaller screens
    - table
      - uses flex for display
      - will be in flex column direction

  ## why
  - this will show how the components are laid out

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - add object `ProblemVerdictMap`

  ## how

  ## why
  - will be used to convert verdict keys in `Problem` type into a
    readable string

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - add package `recharts`

  ## how

  ## why

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage

  ## what
  - add `tremor` tailwindcss config
    - brand colors
      - light mode
      - dark mode
    - background colors
      - light mode
      - dark mode
    - border colors
      - light mode
      - dark mode
    - content colors
      - light mode
      - dark mode
    - box shadow
      - light
      - dark
    - border radius
    - font size

  ## how
  - obtained from
    - https://www.tremor.so/docs/getting-started/installation

  ## why
  - some of the tailwindcss styles from `tremor.so` will be used in this app
    - using chart styles
      - bar chart
      - line chart
      - area chart
      - tooltip styles

  ## where
  - ./tailwind.config.ts

  ## usage

…bar chart

  ## what
  - add function to generate data for `rechart` bar chart

  ## how

  ## why
  - this will be used to generate the data needed for `recharts` bar
    chart to render

  ## where
  - ./src/utils/dataProcessing.ts

  ## usage

  ## what
  - combine multiple instances of `Verdict` into one
    - add type `ProblemVerdictType`
      - title: string to display in client side. usually for displaying tooltip title
      - bgColor: tailwindcss background color
      - fgColor: tailwindcss foreground color
      - bgHex: hexcode of property `bgColor`
      - fgHex: hexcode of propetty `fgColor`
    - apply type `ProblemVerdictType` in object `ProblemVerdictMap`
      - set their properties
      - set `Problem.ver` number as key into object `ProblemVerdictMap`
        - they map to the same key in the object `ProblemVerdictMap
        - doing this way to prevent duplocate code`
    - remove `VerdictType`
    - remove `Verdict`
      - the keys of this object are applied in object `ProblemVerdictMap`
    - set property `Submission.verdict` to type `ProblemVerdictType`
  - apply changes to other files
    - replace `Verdict` with `ProblemVerdictMap` in api endpoint
      `/api/poll[pollId]`

  ## how

  ## why
  - this to remove duplicate code
  - to combine string abbreviation of the verdict into object `ProblemVerdictMap`
  - to combine verdict ID from `Submission` into object `ProblemVerdictMap`
  - refactoring these later would be difficult

  ## where
  - ./src/app/api/poll/[pollId]/route.ts
  - ./src/types/index.ts

  ## usage

…rdictMap`

  ## what
  - use array to filter out keys from `ProblemVerdictMap`
    - use an array to filter which keys to keep in `ProblemVerdictMap`
    - filter out keys from ProblemVerdictMap using the array
    - update references
      - setting `tooltipTitle`
      - setting `fill`

  ## how

  ## why
  - to keep up with the changes in `ProblemVerdictMap`
    - check c041074
  - be default `ProblemVerdictMap` contains all verdicts
    - don't need to show all of them in a bar chart

  ## where
  - ./src/utils/dataProcessing.ts

  ## usage

  ## what
  - add file header docs

  ## how

  ## why
  - to explain what is this file used for

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - add Recharts custom tooltip component

  ## how
  - obtained from
    - https://github.com/tremorlabs/tremor/blob/main/src/components/chart-elements/common/ChartTooltip.tsx
  - note
    - this tooltip is from `tremor.so` , and it uses tailwindcss custom
      configs, which means `tailwind.config.ts` needs to be updated
      - done in commit 1e5b14f

  ## why
  - this will be used in charts
  - this is will make chart tooltips more pleasing to look at compared
    to the default tooltips

  ## where
  - ./src/components/charts/Tooltip.tsx

  ## usage

  ## what
  - add `ProblemVerdictChart` component

  ## how
  - uses Rechart bar chart
  - uses custom tooltip component in `./src/components/charts/Tooltip`

  ## why
  - this will be used to display a problem number submission verdicts
    using a bar chart

  ## where
  - ./src/components/charts/ProblemVerdictChart.tsx

  ## usage

  ## what
  - render `ProblemVerdictChart` component

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

…vertime/[problemNum]`

  ## what
  - add schema for endpoint `/api/submissions/overtime/[problemNum]`

  ## how

  ## why
  - this will be used to validate the data on client side and server
    side

  ## where
  - ./src/schema/index.ts

  ## usage

…mNum]`

  ## what
  - add endpoint `/api/submissions/overtime/[problemNum]`
    - get the submission count of a problem using problem number
      - if invalid `problem number` is given, a response of 400 will be returned
      - if the problem doesn't exist, a response of 404 will be returned
      - the endpoint will return a cumulative submission count
        - an array of object
          - time: momentjs time serialized
          - count: submission count from current index + the previous
            index

  ## how

  ## why
  - this will be used to chart submissions overtime of a problem

  ## where
  - ./src/app/api/submissions/overtime/[problemNum]/route.ts

  ## usage

  ## what
  - add react-query hook to fetch submissions overtime

  ## how
  - fetch from api endpoint `/api/submissions/overtime/[problemNum]`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - add `SubmissionsOvertimeChart` component

  ## how
  - takes prop
    - data of type `SubmisionsOvertimeType[]`
  - use Recharts `AreaChart` component
  - use custom tooltip from `./src/components/charts/Tooltip`
  - use linear gradient for color the area chart

  ## why
  - this will be used to display submissions overtime of a problem using
    area chart

  ## where
  - ./src/components/charts/SubmissionsOvertimeChart.tsx

  ## usage

  ## what
  - render `SubmissionOvertimeChart` component

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - add `Python` as a value in `Language` object

  ## how

  ## why
  - found a case where the language id was not present in the `Language`
    object.
    - after a little investigation, I found that this new id is for the
      language `Python`

  ## where
  - ./src/types/index.ts

  ## usage

…anguage/[problemNum]`

  ## what
  - add schema for endpoint `/api/submissions/language/[problemNum]`

  ## how

  ## why
  - this will be used to validate the data on client side and server
    side

  ## where
  - ./src/schema/index.ts

  ## usage

…s of a problem

  ## what
  - limit start range when fetching submissions of a problem
    - limit submissions from today to 1 year ago and return 500
      submissions
  - add params
    - startSubmission: starting point when searching for submissions
      - default to 1 year before in unix time. in other words, it will
        return submissions starting from 1 year ago
    - endSubmission: ending point when searching for submissions
      - default to current time.
    - limit: limit number of submissions to value provided
      - default to 500. in other words it will always return 500
        submissions of a problem
      - currently not being used.
      - how to use
        - append the number to end
          - ex: https://uhunt.onlinejudge.org/api/p/subs/36/0/1707350533/500
            - the 500 in the end of url will limit number of
              submissions to 500

  ## how

  ## why
  - before the start range was set to 0, which would fetch every
    submission for the problem
    - this would fetch too many items and it would take a while to
      process them

  ## where
  - ./src/utils/constants.ts

  ## usage

  ## what
  - render `VirtualTable` for ranklist
    - fetch problem ranklist using react-query hook
    - render data using VirtualTable

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

…bmissions/[problemNum]`

  ## what
  - add schema for endpoint `/api/submissions/[problemNum]`

  ## how

  ## why
  - this will be used to validate the data on client side and server
    side

  ## where
  - ./src/schema/index.ts

  ## usage

…lemNum]`

  ## what
  - add endpoint `/api/submissions/[problemNum]`
    - get submissions of a problem using problem number
      - if invalid `problem number` is given, a response of 400 will be returned
      - if the problem doesn't exist, a response of 404 will be returned
      - fetch problem submissions
      - add extra properties
        - verdict
          - fgColor
          - bgColor
          - title
          - fgHex
          - bgHex
        - language: convert language ID into a string
        - pnum: problem number
        - pTitle: name of the problem

  ## how

  ## why

  ## where
  - ./src/app/api/submissions/[problemNum]/route.ts

  ## usage

  ## what
  - add react-query hook to fetch problem submissions

  ## how
  - fetch from endpoint `/api/submissions/[problemNum]`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - render `VirtualTable` for `Problem submissions`
    - fetch problem submissions using react-query hook
    - render data using VirtualTable

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

…missions

  ## what
  - use the limit value when fetching problem submissions

  ## how
  - uses the parameter `limit` value
    - default is 500

  ## why
  - this will limit the number of submissions returned

  ## where
  - ./src/utils/constants.ts

  ## usage

…n theme

  ## what
  - change rader chart grid opacity depending on theme
    - set radar chart grid opacity to 0.3 in dark mode
    - set radar chart grid opacity to 1.0 in light mode

  ## how

  ## why
  - the opacity of 0.3 is barely visible in light mode
  - cant change the fill color of the radar chart grid

  ## where
  - ./src/components/charts/SubmissionLanguageRadarChart.tsx

  ## usage

  ## what
  - render problem number and title

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - set DataTable height if provided

  ## how
  - take `height` as a prop
  - set the height of the table if it's defined
  - set the table to overflow-y if height is defined

  ## why
  - a replacement for `VirtualTable`
    - VirtualTable struggles to scroll when theres high amounts of items
      to render. DataTable can handle high items without issue
  - to have the ability to set the size of the DataTable

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage

…missions

  ## what
  - use `DataTable` to render ranklist and submissions
    - set a max height to the DataTable

  ## how

  ## why
  - DataTable can handle high volumes of items when scrolling

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - set submission limit to 500

  ## how

  ## why
  - Since the DataTable is being used to display problem submissions, it
    can handle a high amount of items to be rendered

  ## where
  - ./src/app/api/submissions/[problemNum]/route.ts

  ## usage

…emNum]` page

  ## what
  - add `Loading` component for `/problems/[problemNum]` page

  ## how

  ## why
  - this will be used to display when fetching data on the
    `/problems/[problemNum]` page

  ## where
  - ./src/app/problems/[problemNum]/loading.tsx

  ## usage

  ## what
  - use `Loading` component
    - use component from `./src/app/problems/[problemNum]/loading.tsx`

  ## how

  ## why
  - this will be used to display when fetching data for
    `problems/[problemNum]` page

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - set title as link to view problem pdf

  ## how

  ## why
  - to be able to view the problem that is currently loaded

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - update images for `/problems/[problemNum]` page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./docs/images/page-problems-num-loading.png
  - ./docs/images/page-problems-num.png

  ## usage

  ## what
  - display screenshots for `/problems/[problemNum]` page

  ## how

  ## why

  ## where
  - ./README.md

  ## usage

  ## what
  - extract data after fetching when fetching from `/api/problems/[problemNum]`

  ## how

  ## why
  - this will prevent error `variable may be undefined` when using the
    hooks data

  ## where
  - ./src/hooks/index.ts

  ## usage

…stats

  ## what
  - update reference when fetching problemNum stats

  ## how

  ## why
  - to accommodate changes made in `./src/hooks/index.ts`
    - check 46ca37e

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - add npm script
    - `lint:tsc`
    - `lint:eslint`
  - update npm script
    - `lint`

  ## how

  ## why
  - to lint code using typescript and eslint separately and together

  ## where
  - ./package.json

  ## usage

  ## what
  - apply types returned when fetching

  ## how

  ## why
  - to provide a data type when data is fetched

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - apply types to the fetched data using react-query hooks

  ## how

  ## why
  - to deal with typescript errors
  - to accomodate changes made from d957416

  ## where
  - ./src/app/problems/[problemNum]/page.tsx
  - ./src/app/problems/page.tsx

  ## usage